<template>
 <div class="login-page">
   <form @submit.prevent="submit" ref="form">
     <v-text-field
       v-model="userInfo.username"
       :rules="[
         (value: string) => {
           if (value?.length >= 2) return true
           return '用户名需要至少2个字符'
         },
       ]"
       label="用户名"
     ></v-text-field>

     <v-text-field
       v-model="userInfo.password"
       :rules="[
         (value: string) => {
           if (/^[a-zA-Z0-9]{6,20}$/.test(value)) return true
           return '密码需要至少8个字符'
         },
       ]"
       label="密码"
     ></v-text-field>

<v-row align="center" justify="center">
  <v-btn
    class="me-4"
    type="submit"
  >
    提交
  </v-btn>

  <v-btn @click="handleReset">
    重置
  </v-btn>
</v-row>
   </form>
 </div>
</template>

<script lang="ts" setup>
import GetUserInfo from '@/stores/modules/user.ts'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'LoginPage'
})
const router=useRouter()
const user= GetUserInfo()
const form = ref()
const userInfo=ref({
  username: '',
  password: ''})

const submit = () => {
  // 登录逻辑处理
  const {username,password} = userInfo.value
  user.login({username:username,password:password}).then(()=>{
    ElMessage.success('登录成功')
    router.push('/')
  }).catch(err=>{
    ElMessage.error(err)
  })
}

const handleReset = () => {
  form.value.reset()
}
</script>

<style lang="scss" scoped>
.login-page{
  width:30%;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
</style>
